<template>
	<view>
		<scroll-view scroll-x style="width: 710rpx; white-space: nowrap;margin:0 auto;" :style="{padding:styles.padding_top+'px ' +styles.padding_horizontal+'px ' + styles.padding_bottom+'px'}">
			<view class="label-lists"
				>
				<view class="item" v-for="(item,index) in content.data" @tap="navigate(item.link)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script type="text/javascript">
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {

			}
		},
		methods: {
			navigate(link) {
				const { path, params} = link
				if(!path) return
				this.$Router.push({
					path: path,
					query: params
				})
			}
		},
		computed: {

		}
	};
</script>

<style lang="scss" scoped>
	.label-lists {
		display: flex;
		.item{
			font-size: 22rpx;
			text-align: center;
			padding: 10rpx 22rpx;
			background-color: #EEEEEE;
			border-radius: 50rpx;
			margin-right: 20rpx;
			text-wrap: nowrap;
			color: #666666;
		}
	}
</style>